import preact, { h, Component } from 'preact';
import ReactDOM from 'react-dom';
import Message from './Message';

class MessageBox {
	constructor(component) {
		this.component = component;
		this.container = null;
		this.counter = 0;
		this.opts = {
			title: '',
			hide: this.hide
		};
	}

	show = (opts) => {
		const options = Object.assign({}, this.opts, opts);
		this.create(options);
	}

	hide = () => {
		this.destory();
	}

	reset = () => {
		this.destory();
	}

	create = (opts) => {
		if (!this.container) {
			this.container = document.createElement('div');
			document.body.appendChild(this.container);
		}
		ReactDOM.render(h(
				this.component,
				opts,
			), this.container);
	}

	destory = () => {
		if (this.container) {
			ReactDOM.unmountComponentAtNode(this.container);
			document.body.removeChild(this.container);
			this.container = null;
		}
	}
}

export default new MessageBox(Message);
